<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>timepoint</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
        crossorigin="anonymous"></script>
    <script type="module" src="/scripts/user_home.js"></script>
</head>

<body>
    <div class="shadow bg-light">
        <div class="d-flex text-bg-primary">
            <div class="d-inline-block pt-2 mt-3 mb-3 ms-3">
                <i class="bi bi-activity h1"></i>
            </div>
            <div class="d-inline-block pt-2 ms-3 mt-3 mb-3">
                <h1 class="h1">TIMEPOINT</h1>
            </div>
            <div class="d-inline-block mt-3 ms-2 mt-3 mb-3">
                <h1 class="h3"><span class="badge rounded-pill bg-danger">996</span></h1>
            </div>
            <div class="d-inline-block ms-auto me-3 pt-2 mt-3 mb-3">
                <i class="bi bi-three-dots h1" id="option_btn"></i>
            </div>
        </div>
    </div>
    <p>
    <div class="container ms-2">
        <div id="current-date-time" class="text-begin text-success"></div>
        <div class="d-flex mt-3">
            <button id="signin_btn" type="button" class="btn btn-primary rounded-0 text-start"
                onclick="SigninFunc()">签到</button>
            <button id="signout_btn" type="button" class="btn btn-secondary rounded-0 text-start d-none"
                onclick="SignoutFunc()">签退</button>
        </div>
    </div>
    </p>
    <p>
    <div class="ps-4 d-inline-block bg-light">
        <div>本月异常 <span id="miss_count" class="text-danger h3"></span> 天</div>
        <div>本周签到 <span id="week_count" class="text-primary h4"></span> 天，累计时长 <span id="week_time_h"
                class="text-primary h4"></span> 小时 <span class="text-primary h4" id="week_time_m"></span> 分</div>
        <div>本月签到 <span id="month_count" class="text-primary h4"></span> 天，累计时长 <span id="month_time_h"
                class="text-primary h4"></span> 小时 <span class="text-primary h4" id="month_time_m"></span> 分</div>
    </div>
    </p>
    <p>
    <div class="container ms-0 ps-4">
        <a href="/pages/record.html">查看签到记录</a>
    </div>
    </p>
</body>

</html>